<template>
    <div>
        <!-- 新闻管理 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="新闻标题">
                <el-input size="small" v-model="formInline.title" auto-complete="off" placeholder="新闻标题"></el-input>
            </el-form-item>
        <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button size="small" type="primary" @click="addproject()">新增</el-button>
        </el-form-item>
        </el-form>
        <el-table size="small" :data="dataList" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" sortable prop="title" label="新闻标题" width="200">
            </el-table-column>
            <el-table-column align="center" sortable prop="detail" label="新闻详情" min-width="200">
            </el-table-column>
            <el-table-column align="center" label="图片" width="150">
                <template slot-scope="scope">
                    <img style="width:20px; height: 20px;" :src="scope.row.url" 
                    alt="" @click="getImgList(scope.row.url)">
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150">
                <template slot-scope="scope">
                    <span class="table_btn" @click="update(scope.row)">修改</span>
                    <span class="table_del" @click="del(scope.row)">删除</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <!-- 分页组件 -->
       <el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="pageparm.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageparm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageparm.total">
      </el-pagination>
         <!-- 创建实验室 -->
        <el-dialog title="创建新闻" :visible.sync="addVisible" width="70%" @click='closeShiyanshi()' >
            <el-form label-width="100px" :model="addData">
                <el-form-item label="新闻标题" prop="name" >
                    <el-input size="small" v-model="addData.title" auto-complete="off" placeholder="请输入实验室名称"></el-input>
                </el-form-item>
                <el-form-item label="新闻内容" prop="name">
                    <el-input size="small" v-model="addData.detail" auto-complete="off" placeholder="请输入实验室名称"></el-input>
                </el-form-item>
                <el-form-item label="头像：">
                    <el-upload
                        list-type="picture-card"
                        action="/img/ngUploadImg"
                        :auto-upload="false"
                        :on-change="importExcel"
                        :on-remove="fileRemove"
                        :limit="1"
                        multiple
                        accept=".jpg, .jpeg, .png"
                        >    
                        <i class="el-icon-plus"></i>
                    </el-upload>      
                </el-form-item>    
                <el-form-item>
                    <el-button size="small" type="primary" @click="add()">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible" title="图片展示">
            <img :src="currentImageUrl" alt=""/>
        </el-dialog>
    </div>
</template>
<script>
import { addNews,getNewsList } from '../../api/news'
import { getFileNameFromPath } from '../../utils/util'
import { fileUpload } from '../../api/file'
// 导入请求方法
export default {
    data() {
        return {
            dialogVisible: false,
            currentImageUrl:"",
            addData:{},
            addVisible:false,
            formInline:{
                title:"",
                offset:0,
                pageSize:0,
                laboratoryId:0,
            },
            dataList:[],
            // 分页参数
        pageparm: {
            currentPage: 1,
            pageSize: 10,
            total: 0
        },
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getImgList(url){
        this.currentImageUrl = url;
        this.dialogVisible = true;
    },
    callFather(){

    },
    getData(){
        let _this = this;
        this.formInline.offset = this.pageparm.currentPage;
        this.formInline.pageSize = this.pageparm.pageSize;
        this.formInline.laboratoryId = sessionStorage.getItem("mainId");
        getNewsList(this.formInline).then(res =>{
            if(res.status == 200){
                _this.dataList = res.data;
                _this.pageparm.total = res.total;
                if(_this.dataList && _this.dataList.length > 0){
                    _this.dataList.forEach(ele => {
                        if(ele.imgList && ele.imgList.length > 0){
                            ele.url = getFileNameFromPath(ele.imgList[0].img);
                        }else {
                            ele.url = "";
                        }
                    })
                }
            }
        })
    },
    handleCurrentChange(val){
      this.pageparm.currentPage = val
      this.getData();
    },
    handleSizeChange(val){
      this.pageparm.pageSize = val
      this.getData();
    },
    add(){
        this.addData.laboratoryId = sessionStorage.getItem("mainId");
        addNews(this.addData).then(res =>{
            if(res.code = 200){
                this.addVisible = false;
                this.$message({
                type: 'success',
                message: "添加成功"
                })
            }
            this.getData();
        })
    },
    fileRemove(){
      this.addData.imgList = [];
    },
    importExcel(file){
      let formData = new FormData()
      formData.append('multipartFile', file.raw)
      fileUpload(formData).then(res =>{
        let img = {};
        img.img = res.data;
        this.addData.imgList = [];
        this.addData.imgList.push(img);
      })
    },
    closeShiyanshi(){

    },
    addproject(){
        this.addVisible = true;
    },
    search(){
        this.getData();
    }
  }
}
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #989898;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #989898;
  }
  .table_btn {
  color: #3A7BFF;
  padding: 5px;
  cursor: pointer;
 }
.table_del {
    color: #ff3a3a;
  padding: 5px;
  cursor: pointer;
}
</style>